<template>
  <div>
    <div id="app" class="wrapper" style="height: 520px; overflow: auto">
      <div class="cip">
        <input
          type="text"
          class="inp2"
          v-model.trim="name"
          placeholder="请输入姓名...."
          autofocus
        />
        <input
          type="text"
          class="inp2"
          v-model.trim="email"
          placeholder="请输入邮箱..."
          autofocus
        />
        <input
          type="text"
          class="inp1"
          v-model.trim="content"
          placeholder="发点评论吧..."
        />
        <button @click="submitP()">提交</button>
      </div>
      <template>
        <el-backtop target=".wrapper" :visibility-height="50"></el-backtop>
      </template>
      <commen-item
        v-for="comment in comments"
        :key="comment.comment_id"
        :comment="comment"
        class="cit"
      ></commen-item>
    </div>
  </div>
</template>

<script>
import ComHook from './Hooks/ComHook'
export default {
  data() {
    return {
      name: '',
      content: '',
      email: '',
    }
  },
  mixins: [ComHook],
  methods: {
    handleClickmoive() {
      this.$router.push('/home/in_theaters')
    },
    submitP() {
      let obj = {
        user_name: this.name,
        comment_content: this.content,
        user_email: 'this.email',
        article_id: 34,
        comment_count: 66,
      }
      if (this.name != '' && this.email != '' && this.contant != '') {
        // console.log(obj)
        this.$http.post('http://localhost:3001/comment', obj).then((res) => {
          console.log(res)
          const { code, message, result } = res.data
          if (code == 0) {
            ;(this.name = ''), (this.content = ''), this.getData()
          }
        })
      } else {
        alert('请输入用户信息')
        return
      }
    },
  },
}
</script>

<style scoped>
html,
body,
#app {
  height: 100%;
}

.cip {
  margin-top: 5px;
  display: flex;
  margin: 5px 5px;
}
.cip input {
  flex: 1;
  margin-right: 5px;
  width: 50px;
  border-radius: 20px;
  border: 0.5px rgb(4, 89, 89) solid;
  padding: 2px 2px;
}
.cip button {
  background-color: cornflowerblue;
  border: 0ch;
  color: aliceblue;
}

.cip button:hover {
  background-color: aqua;
}
.cit {
  margin-top: 10px;
}
</style>
